<template>
  <span>
    <el-popover ref="pop" v-model="pop" :placement="placement" width="300" trigger="click">
      <el-row type="flex" justify="center">
        <el-col :span="18">
          <el-input v-model="searchText" :clearable="true" placeholder="搜索 比如 'plus'" prefix-icon="el-icon-search">
          </el-input>
        </el-col>
        <el-col :span="6">
          <div v-if="clearable">
            <el-button type="danger" icon="el-icon-delete" size="small" @click="selectIcon()" style="margin-left: 4px">
              清空
            </el-button>
          </div>
        </el-col>
      </el-row>
      <el-collapse v-if="!searchMode" class="rf-icon-select--group" v-model="collapseActive" accordion>
        <el-collapse-item title="图标" class="rf-icon-select--class" name="icon">
          <el-row class="rf-icon-select--class-row">
            <el-col class="rf-icon-select--class-col" v-for="(iconName, iconIndex) in iconList" :key="iconIndex" :span="4"
                    @click.native="selectIcon(iconName)">
              <iconSvg :name="iconName"></iconSvg>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <div v-if="searchMode" class="rf-icon-select--group">
        <div class="rf-icon-select--class">
          <el-row class="rf-icon-select--class-row">
            <el-col class="rf-icon-select--class-col"  v-for="(iconName, index) in iconFilted" :key="index" :span="4"
                    @click.native="selectIcon(iconName)">
             <iconSvg :name="iconName"></iconSvg>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-popover>
    <!-- 允许用户输入 -->
    <el-input v-if="userInput" v-model="currentValue" v-bind="bind" style="max-width: 240px;">
      <template v-if="value" slot="prepend">
        <iconSvg :name="value"></iconSvg>
      </template>
      <el-button v-popover:pop slot="append">
        <iconSvg name="list"></iconSvg>
      </el-button>
    </el-input>
    <!-- 不允许用户输入 -->
    <el-button v-popover:pop v-if="!userInput">
      <template v-if="value">
        <iconSvg :name="value"></iconSvg>
      </template>
      {{value ? value : placeholder}}
    </el-button>
  </span>
</template>

<script>
  import iconSvg from './../icon-svg'
  import icons from './../../icons'
  console.log(icons.getNameList())
  const iconList = icons.getNameList()
  export default {
    name: 'rf-icon-select',
    props: {
      // 值
      value: {
        type: String,
        required: false,
        default: ''
      },
      // 占位符
      placeholder: {
        type: String,
        required: false,
        default: ''
      },
      // 弹出界面的方向
      placement: {
        type: String,
        required: false,
        default: 'right'
      },
      // 是否可清空
      clearable: {
        type: Boolean,
        required: false,
        default: true
      },
      // 是否允许用户输入
      userInput: {
        type: Boolean,
        required: false,
        default: false
      },
      // 是否在选择后自动关闭
      autoClose: {
        type: Boolean,
        required: false,
        default: true
      }
    },
    data () {
      return {
        // 绑定弹出框
        pop: false,
        // 所有图标
        iconList,
        // 组件内输入框的值
        currentValue: '',
        // 搜索的文字
        searchText: '',
        // 不是搜索的时候显示的折叠面板绑定的展开数据
        collapseActive: ['icon']
        // collapseActive: [...Array(icon.length)].map((e, i) => i)
      }
    },
    computed: {
      // 输入框上绑定的设置
      bind () {
        return {
          placeholder: this.placeholder,
          clearable: this.clearable,
          ...this.$attrs
        }
      },
      // 是否在搜索
      searchMode () {
        return !!this.searchText
      },
      // 过滤后的图标
      iconFilted () {
        return this.iconList.filter(icon => icon.indexOf(this.searchText) >= 0)
      }
    },
    watch: {
      value (value) {
        this.currentValue = value
      }
    },
    created () {
      this.currentValue = this.value
    },
    methods: {
      selectIcon (iconName = '') {
        this.$emit('input', iconName)
        if (iconName && this.autoClose) {
          this.pop = false
        }
      }
    }
  }
</script>

<style scoped>

  .rf-icon-select--group {
    max-height: 400px;
    overflow-x: hidden;
    overflow-y: scroll;
    border-top: none;
    border-bottom: none;
  }

  .rf-icon-select--class .rf-icon-select--class-title {
    line-height: 30px;
    text-align: center;
    // background-color: @color-bg;

    border-radius: 4px;
    margin: 10px 0px;
  }
  .rf-icon-select--class .rf-icon-select--class-row .rf-icon-select--class-col{
    line-height: 40px;
    text-align: center;
  }
  .rf-icon-select--class .rf-icon-select--class-row .rf-icon-select--class-col:hover{
    // color: @color-text-main;
    // background-color: @color-bg;
    border-radius: 4px;
    font-size: 26px;
    // box-shadow: inset 0px 0px 0px 1px @color-border-1;
  }
</style>
